<template>
  <view class="content">
    <view class="me-head">
      <u-sticky bgColor="#fff">
        <u-tabs :list="allList" lineColor="#07BCAD"
          :activeStyle="{ color: '#07BCAD', fontWeight: 'bold', transform: 'scale(1.05)' }" @click="tabClick"></u-tabs>
      </u-sticky>
    </view>
    <view class="me-center">
      <view class="list-tab">
        <ul class="item-ul" v-for="(item, index) in orderList" :key="index">
          <li v-if="item.odStatus == tabsIndex || tabsIndex == 0">
            <view class="item-top">
              <view>
                <text>订单编号：</text>
                <text>{{ item.odNumber }}</text>
              </view>
              <view class="pay-type" @click="getStatusClass(item.odStatus)">
                <text>{{ allList[item.odStatus].name }}</text>
              </view>
            </view>
            <u-line dashed></u-line>
            <view class="item-content">
              <view class="item-left">
                <u-image :src="item.picUrl" :fade="true" radius="5" width="70" height="70" duration="450"></u-image>
              </view>
              <view class="item-right" @click="goDetail(item)">
                <view class="item-right-v1">
                  <text class="item-title">{{ item.odName }}</text>
                </view>
                <view class="item-right-v1 induce">
                  <text class="rate-text1">卖家编号:64535322343545</text>
                </view>
                <view class="item-right-v1 induce">
                  <text class="rate-text1">下单时间：{{ item.odTime }}</text>
                </view>
                <view class="item-right-v2">
                  <view class="v2-fh">￥<text class="v2-price">{{ item.odPrice }}</text></view>
                </view>
              </view>
            </view>

            <u-line dashed></u-line>

            <view class="item-btom" v-if="item.odStatus == 0">
              <!-- <view @click="check(item)">
                <view class="item-btom-btn">查看中检信息</view>
              </view> -->
              <view @click="payClick(item)">
                <view class="item-btom-btn pay">去签署</view>
              </view>
            </view>

           
          </li>
        </ul>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  onLoad(option) {
  
    this.type = option.type ? option.type : ""

  },
  data() {
    return {
      type: "",
      tabsIndex: 0,
      allList: [
        { tabId: 0, name: '待签署' },

      ],
      orderList: [
        {
          picUrl: 'http://luxuries.h1668.com/uploads/20231214/11704b5934985141e596d47bd1936a24.jpg',
          odNumber: '2023070611124267',
          odName: '名称1',
          odPrice: '6036',
          odAddress: '珠海市香洲区柠溪路125号尊宝比萨',
          odTime: '2023-06-23',
          odStatus: 0,
        },
        {
          picUrl: 'http://luxuries.h1668.com/uploads/20231214/11704b5934985141e596d47bd1936a24.jpg',
          odNumber: '2023070611124267',
          odName: '名称1',
          odPrice: '6036',
          odAddress: '珠海市香洲区柠溪路125号尊宝比萨',
          odTime: '2023-06-23',
          odStatus: 0,
        },
        {
          picUrl: 'http://luxuries.h1668.com/uploads/20231214/11704b5934985141e596d47bd1936a24.jpg',
          odNumber: '2023070611124268',
          odName: '名称2',
          odPrice: '6200',
          odAddress: '珠海市香洲区柠溪路125号尊宝比萨',
          odTime: '2023-06-23',
          odStatus: 0,
        },
        {
          picUrl: 'http://luxuries.h1668.com/uploads/20231214/11704b5934985141e596d47bd1936a24.jpg',
          odNumber: '2023070611124268',
          odName: '名称2',
          odPrice: '6200',
          odAddress: '珠海市香洲区柠溪路125号尊宝比萨',
          odTime: '2023-06-23',
          odStatus: 0,
        }
      ],

    }
  },
  onLoad() {

  },

  methods: {
    tabClick(item) {
      this.tabsIndex = item.index
    },
    getStatusClass(status) {
      return {
        'status-red': status == 1,
        'status-2': status == 2,
        'status-green': status == 3,
      };
    },

    check(item) {
      uni.showModal({
        title: '温馨提示',
        content: '确定要签署该订单吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: (res => {
          if (res.confirm) {

            uni.$u.route({
              url: "pages/test/seller/songjian",
              params: {
                type: this.type
              }
            })

          }
        })
      })

    },
    // 查看物流
    checkwl(item) {

      uni.$u.route({
        url: "pages/test/seller/checkinfo",
        params: {
          type: this.type
        }
      })
    },

    payClick(item) {
      uni.showModal({
        title: '温馨提示',
        content: '确定要签署该订单吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: (res => {
          if (res.confirm) {
            uni.$u.route({
              url: "pages/test/merchant/face",
              params: {
                type: this.type
              }
            })

          }
        })
      })

    },
    evaluateClick() {
      uni.$u.route({
        url: "pages/test/merchant/songjian",
        params: {
          type: this.type
        }
      })
    },

  }
};
</script>
<style scoped lang="scss">
page {
  text-align: center;
  background-color: #F7F8FA;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.me-head {
  width: 100%;
  height: 80upx;
  padding-bottom: 20upx;
}

.me-center {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  margin-top: 20upx;

  .pullScrollView {
    display: flex;
    flex-direction: column;
  }

  .list-tab {
    width: 93%;
    margin: 0 auto;

    .item-ul {
      margin-bottom: 20upx;
    }

    .item-ul li {
      background-color: #ffffff;
      border-radius: 15upx;
      box-shadow: 0 0upx 6upx 0upx rgba(0, 0, 150, .2);
    }

    .item-top {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      font-size: 28rpx;

      .pay-type {
        font-weight: bold;
      }

      .status-red {
        color: #ff5500;
      }

      .status-2 {
        color: #4891d9;
      }

      .status-green {
        color: #00d500;
      }
    }

    .item-content {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10upx 20upx;
    }

    .item-right {
      flex: 1;
      margin-left: 20upx;

      .item-right-v1 {
        width: 100%;
        padding: 8rpx 0;

        .item-title {
          font-weight: bold;
          display: -webkit-box;
        }
      }

      .induce {
        display: flex;
        align-items: center;

        .rate-text1 {
          font-size: 26rpx;
        }

        .rate-text2 {
          margin-left: 20rpx;
          font-size: 26rpx;
          color: #B9B9B9;
        }
      }

      .item-right-v2 {
        padding: 8rpx 0;
        display: flex;
        justify-content: space-between;
        color: #a3a3a3;
        font-size: 26upx;

        .v2-fh {
          color: #ff5500;
          font-size: 22upx;
        }

        .v2-price {
          color: #ff5500;
          font-weight: bold;
          font-size: 32upx;
        }
      }
    }

    .item-btom {
      display: flex;
      justify-content: flex-end;
      padding: 20rpx 10upx;
      font-size: 28upx;

      .item-btom-btn {
        padding: 6upx 40upx;
        border: 1px solid #d2d3d4;
        border-radius: 40upx;
        margin-right: 20upx;
        align-items: center;
      }

      .pay {
        background-color: #07BCAD;
        border: 1px solid #07BCAD;
        color: #ffffff;
      }
      .orgion {
        background-color: #f60;
        border: 1px solid #f60;
        color: #ffffff;
      }
    }
  }
}
</style>
